<template>
	<div class="w-1 left flex flex-column justify-content-between">
		<div class="flex flex-column align-items-center">
		<div class="flex flex-column align-items-center justify-content-center mt-2 ">

			<Avatar :image="chatStore.user.avatar" class="" size="large" shape="circle" />
			<span>{{ chatStore.user.username }}</span>
		</div>
		<i class="pi pi-whatsapp mt-5 cursor-pointer" @click="chatStore.activeTab = 'chat'" :style="`font-size: 2rem; color: ${chatStore.isTabActive('chat') ? 'springgreen' : '#fff'};`"></i>
		<i class="pi pi-users mt-4 cursor-pointer" @click="chatStore.activeTab = 'friends'" :style="`font-size: 2rem; color: ${chatStore.isTabActive('friends') ? 'springgreen' : '#fff'};`"></i>
	</div>
	<div class="flex flex-column align-items-center justify-content-center mb-2 relative ">
		<SpeedDial
			:model="items"
			:radius="80"
			type="quarter-circle"
			direction="up-right"
			:transitionDelay="80"
			showIcon="pi pi-bars"
			hideIcon="pi pi-times"
			buttonClass="p-button-outlined"
			:tooltipOptions="{ position: 'right', event: 'hover' }"
			:pt="{
				root: { style: 'bottom: 0px; left: 15px' },
			}"
		/>
	</div>
	</div>
</template>

<script setup lang="ts">
import { Avatar, SpeedDial } from '@/utils/primevue'
import useChatStore from '@/stores/chat'
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const chatStore = useChatStore()
const router = useRouter()

const items = ref([
    {
        label: '登出',
        icon: 'pi pi-lock',
        command: () => {
					chatStore.loginout(() => {
						router.push('/chat/login')
					})
        }
    },
    {
        label: 'Update',
        icon: 'pi pi-refresh',
        command: () => {

        }
    },
    {
        label: 'gitee',
        icon: 'pi pi-external-link',
        command: () => {
						window.open('https://gitee.com/yangguoliang001/vue-desktop')
        }
    }
])
</script>

<style scoped lang="scss">
.left {
	background: #00000070;
	:deep(.p-button.p-button-icon-only.p-button-rounded) {
		width: 2rem;
		height: 2rem;
	}
	:deep(.p-speeddial-action) {
		width: 2rem;
		height: 2rem;
	}
}
</style>
